---
title: "Spacer"
description: "Spacer is a component used to add space between components."
---

import {spacerContent} from "@/content/components/spacer";

# Spacer

Spacer is a component used to add space between components.

<ComponentLinks component="spacer" rscCompatible />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add spacer",
    npm: "npm install @heroui/spacer",
    yarn: "yarn add @heroui/spacer",
    pnpm: "pnpm add @heroui/spacer",
    bun: "bun add @heroui/spacer"
  }}
/>


## Import

<ImportTabs
  commands={{
    main: 'import {Spacer} from "@heroui/react";',
    individual: 'import {Spacer} from "@heroui/spacer";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={spacerContent.usage} />

> **Note**: The `x` and `y` values are based on [Tailwind Spacing Scale](https://v3.tailwindcss.com/docs/space)

<Spacer y={4}/>  

## API

### Spacer Props

<APITable
  data={[
    {
      attribute: "x",
      type: "Space",
      description: "The x axis space",
      default: "1"
    },
    {
      attribute: "y", 
      type: "Space",
      description: "The y axis space",
      default: "1"
    }
  ]}
/>

### Types

```ts
type Space = 0 | "px" | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
```
